<template>
  <div class="org-search-wrapper">
    <div v-if="isEmpty" class="org-search-empty">
      <div class="org-search-empty-img-box">
        <img src="@/assets/img/org-search-empty.png" alt="" />
      </div>
      <div class="org-search-empty-text">抱歉，没有找到“{{ searchValue }}”的搜索结果</div>
    </div>
    <div v-else class="org-search-content">
      <div v-if="dept.length > 0" class="org-search-box">
        <div class="org-search-box-title">部门列表</div>
        <div class="org-search-box-list">
          <div
            v-for="item in dept"
            :key="item.id"
            class="org-search-box-list-item"
            @click="itemClick('dept', item)"
          >
            <i class="el-icon-suitcase"></i>
            <span class="org-search-box-list-item-text">{{ item.deptName }}</span>
          </div>
        </div>
      </div>
      <div v-if="staff.length > 0" class="org-search-box">
        <div class="org-search-box-title">员工列表</div>
        <div class="org-search-box-list">
          <div
            v-for="item in staff"
            :key="item.id"
            class="org-search-box-list-item"
            @click="itemClick('user', item)"
          >
            <i class="el-icon-user"></i>
            <span class="org-search-box-list-item-text">
              {{ `${item.realName}-${item.mobilePhone}-${item.position || '无'}` }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <user-info ref="userInfo" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { getSearch, getUserdetail } from '@/api/organization';
  import UserInfo from '../drawer/UserInfo';

  export default {
    components: { UserInfo },
    props: {
      searchValue: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        staff: [],
        dept: [],
        isEmpty: false,
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
    },
    watch: {
      searchValue(value) {
        const { organId } = this.userInfo;
        getSearch({
          organizationId: organId,
          keyWord: value,
        }).then(res => {
          const { staff = [], dept = [] } = res.data || {};
          this.staff = staff;
          this.dept = dept;
          this.isEmpty = [...staff, ...dept].length <= 0;
        });
      },
    },

    methods: {
      itemClick(type, item) {
        if (type === 'user') {
          const { organId } = this.userInfo;
          getUserdetail({
            organizationId: organId,
            staffId: item.id,
          }).then(res => {
            this.$refs['userInfo'].onOpen(res.data);
          });
          return false;
        }
        this.$emit('item-click', item);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .org-search-wrapper {
    padding: 0 6px;
  }
  .org-search-box-title {
    color: #b4b8be;
    height: 34px;
    line-height: 34px;
  }
  .org-search-box-list {
    color: #353739;
  }
  .org-search-box-list-item {
    cursor: pointer;
    padding: 0 8px;
    &:hover {
      background-color: #e9f1ff;
    }
  }
  .org-search-box-list-item-text {
    padding-left: 5px;
  }
  .org-search-empty {
    margin: 0 auto;
    text-align: center;
  }
  .org-search-empty-text {
    color: #ababae;
  }
</style>
